<template>
  <span
    class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium"
    :class="statusClass"
  >
    <span v-if="icon" class="mr-1">
      <slot name="icon"></slot>
    </span>
    {{ statusText }}
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 状态类型
type StatusType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'purple' | 'brown';

// 定义组件属性
const props = defineProps({
  // 状态类型
  type: {
    type: String as () => StatusType,
    default: 'default',
    validator: (value: string) => ['default', 'primary', 'success', 'warning', 'danger', 'info', 'purple', 'brown'].includes(value)
  },
  // 徽章文本
  text: {
    type: String,
    required: true
  },
  // 是否显示图标（通过插槽传入）
  icon: {
    type: Boolean,
    default: false
  }
})

// 根据类型计算样式类
const statusClass = computed(() => {
  const classes: Record<StatusType, string> = {
    default: 'bg-gray-100 text-gray-800',
    primary: 'bg-blue-100 text-blue-800',
    success: 'bg-green-100 text-green-800',
    warning: 'bg-yellow-100 text-yellow-800',
    danger: 'bg-red-100 text-red-800',
    info: 'bg-indigo-100 text-indigo-800',
    purple: 'bg-purple-100 text-purple-800',
    brown: 'bg-amber-100 text-amber-800'
  }
  return classes[props.type]
})

// 显示文本
const statusText = computed(() => props.text)
</script>

<style scoped>
/* 徽章基础样式 */
.inline-flex {
  display: inline-flex;
}

.items-center {
  align-items: center;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.font-medium {
  font-weight: 500;
}

.mr-1 {
  margin-right: 0.25rem;
}

/* 状态颜色 - 使用CSS变量适配深色模式 */
.bg-gray-100 {
  background-color: var(--n-color-target);
}
.text-gray-800 {
  color: var(--n-text-color-1);
}

.bg-blue-100 {
  background-color: var(--n-primary-color-suppl);
}
.text-blue-800 {
  color: var(--n-primary-color);
}

.bg-green-100 {
  background-color: var(--n-success-color-suppl);
}
.text-green-800 {
  color: var(--n-success-color);
}

.bg-yellow-100 {
  background-color: var(--n-warning-color-suppl);
}
.text-yellow-800 {
  color: var(--n-warning-color);
}

.bg-red-100 {
  background-color: var(--n-error-color-suppl);
}
.text-red-800 {
  color: var(--n-error-color);
}

.bg-indigo-100 {
  background-color: var(--n-info-color-suppl);
}
.text-indigo-800 {
  color: var(--n-info-color);
}

.bg-purple-100 {
  background-color: var(--n-info-color-suppl);
}
.text-purple-800 {
  color: var(--n-info-color);
}

.bg-amber-100 {
  background-color: var(--n-warning-color-suppl);
}
.text-amber-800 {
  color: var(--n-warning-color);
}
</style>